---
title: Theme customization
---

::doc-component-demo
---
title: What is Tailwind CSS?
---
Tailwind CSS is a popular utility-first CSS framework that allows developers to quickly build modern and responsive user interfaces. The framework provides a large set of pre-defined utility classes that can be easily applied to HTML elements, helping to create visually appealing designs without having to write custom CSS code.

As example, the following HTML markup will create a link with a primary text color

```html
<a 
  href="#" 
  class="
    text-primary-500
    dark:text-primary-400
    hover:underline 
    focus:underline
  "
>
  A link with a primary text color
</a>
```
For those familiar with preprocessors like SCSS, Tailwind CSS provides an organized and easy-to-learn approach to styling web applications. While SCSS allows us to write custom CSS code using variables, functions, and mixins, Tailwind CSS follows a utility-first approach where pre-defined CSS classes are used directly in HTML markup.

While the framework provides a large set of utility classes, it is essential to combine them with components in order to create a consistent user interface without writing repetitive code. By using Tailwind CSS with components, we can achieve a clean, efficient, and scalable design system.

---

Useful resources:

- [Learn utility-first fundamentals on tailwindcss.com](https://tailwindcss.com/docs/utility-first)
::



::doc-component-demo
---
title: How Tairo uses Tailwind CSS?
---
Tairo uses the [Shuriken UI preset](https://github.com/shuriken-ui/tailwind) which extends the default Tailwind CSS configuration without overriding it. This approach allows you to use the default Tailwind CSS configuration and Shuriken UI preset at the same time.

:doc-heading{label="Shuriken UI preset"}

- **Components:** 

  This includes a set of pre-defined utilities reusable in components like `nui-focus`, `nui-mask` and `nui-mark`. You can explore them [on github.com](https://github.com/shuriken-ui/tailwind/blob/main/src/plugins/components.ts)

- **Extended colors:** 

  Instead of hardcoding the default Tailwind CSS colors, Shuriken UI uses a set of colors that are more suitable for web applications. You can still use the default Tailwind CSS colors if you want to. Continue to [colors](/documentation/tailwindcss/colors) to learn more.


- **Extended fonts:**

  More fonts are added to the default Tailwind CSS configuration so you can fine tune your typography. Continue to [fonts](/documentation/tailwindcss/fonts) to learn more.


:doc-heading{label="Tairo plugins"}

In addition to tailwind plugin and shuriken ui preset, Tairo adds some plugins which you can find in `layers/tairo/tailwind`, like the `expose-colors` plugin that exposes Tailwind CSS colors in native css variables.

---

Useful resources:

- [Learn about presets on tailwindcss.com](https://tailwindcss.com/docs/presets)
- [Explore Shuriken UI predefined components on github.com](https://github.com/shuriken-ui/tailwind/blob/main/src/plugins/components.ts)
::


::doc-component-demo
---
title: Customizing Tailwind CSS
---

Tairo has full typescript support for tailwind, so you can create a `tailwind.config.ts` file to customize your Tailwind CSS configuration in your main app layer. You can customize fonts, spacing, radius, shadows, colors and more.

```ts [app/tailwind.config.ts]
import { withShurikenUI } from '@cssninja/nuxt-ui/tailwind'
import colors from 'tailwindcss/colors'

/**
 * The `withShurikenUI` function injects the Shuriken UI preset 
 * into the Tailwind CSS configuration,
 * 
 * Allows VSCode to provide autocompletion 
 * for Tailwind CSS classes.
 */
export default withShurikenUI({
  /**
   * Define your custom Tailwind CSS theme here
   */
  theme: {
    // extend the default theme here
  },
  /**
   * You can add additional plugins to Tailwind CSS 
   * by adding them to the plugins
   */
  plugins: [],
  /**
   * The content property is automatically populated 
   * to include all nuxt files, but you can add 
   * additional files so that Tailwind CSS can 
   * extract the classes from them.
   */
  content: [],
})
```

---

Useful resources:

- [Learn Theme customization on tailwindcss.com](https://tailwindcss.com/docs/theme)
- [View the default Tailwind CSS configuration on github.com](https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/config.full.js)
- [View how content property is created on tailwindcss.nuxtjs.org](https://tailwindcss.nuxtjs.org/tailwind/config#default-configuration)
::


::doc-nav
---
prev: /documentation/config/collapse
next: /documentation/tailwindcss/colors
---
::